<%--
  Created by IntelliJ IDEA.
  User: luo
  Date: 2020/7/21
  Time: 15:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Js迷宫游戏</title>
</head>
<body>
<SCRIPT>
    function ShowMenu(bMenu) {
        document.all.idFinder.style.display = (bMenu) ? "none" : "block"
        document.all.idMenu.style.display = (bMenu) ? "block" : "none"
        idML.className = (bMenu) ? "cOn" : "cOff"
        idRL.className = (bMenu) ? "cOff" : "cOn"
        return false
    }
</SCRIPT>
<STYLE>
    A.cOn {text-decoration:none;font-weight:bolder}
    #article {font: 12pt Verdana, geneva, arial, sans-serif;  background: white; color: black; padding: 10pt 15pt 0 5pt}
    #article P.start {text-indent: 0pt}
    #article P {margin-top:0pt;font-size:10pt;text-indent:12pt}
    #article #author {margin-bottom:5pt;text-indent:0pt;font-style: italic}
    #pageList P {padding-top:10pt}
    #article H3 {font-weight:bold}
    #article DL, UL, OL {font-size: 10pt}
</STYLE>
<SCRIPT>
    function addList(url,desc) {
        if ((navigator.appName=="Netscape") || (parseInt(navigator.appVersion)>=4)) {
            var w=window.open("","_IDHTML_LIST_","top=0,left=0,width=475,height=150,history=no,menubar=no,status=no,resizable=no")
            var d=w.document
            if (!w._init) {
                d.open()
                d.write("<TITLE>Loading...</TITLE><EM>Loading...</EM>")
                d.close()
                w.opener=self
                window.status="个人助理添加中: " + desc
            } else {
                window.status=w.addOption(url,desc)
                w.focus()
            }
        }
        else
            alert("您的浏览器不支持个人助理.")
        return false
    }
</SCRIPT>
<STYLE TYPE="text/css">
    #board TD {width: 15pt; height: 15pt; font-size: 2pt; }
    TD.foot {font-size: 10pt;}
    #board TD.start {font-size: 8pt; border-left: 2px black solid; background:yellow; border-top: 2px black solid;text-align: center; color: red}
    #board TD.end {font-size: 8pt; text-align: center; color: green}
    #message {margin: 0pt; padding: 0pt; text-align: center}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
    var maze = new Array()
    var sides = new Array("Border-Top", "Border-Right")
    for (var rows=0; rows<20; rows++)
        maze[rows] = new Array()
    maze[0][0] = new Array(1,1,1,1,1,1,1,1,1,1,1,1)
    maze[0][1] = new Array(0,0,1,0,1,0,0,0,0,1,0,1)
    maze[1][0] = new Array(1,0,0,0,1,0,1,1,1,0,1,1)
    maze[1][1] = new Array(0,1,1,0,0,1,1,0,0,1,0,1)
    maze[2][0] = new Array(1,0,1,0,1,0,0,1,1,0,1,1)
    maze[2][1] = new Array(0,0,0,0,1,1,1,0,0,0,0,1)
    maze[3][0] = new Array(0,1,1,1,1,1,0,0,0,0,1,1)
    maze[3][1] = new Array(1,0,0,1,0,0,0,1,1,0,0,1)
    maze[4][0] = new Array(0,0,0,0,0,0,1,1,1,1,1,1)
    maze[4][1] = new Array(1,1,1,1,1,0,0,0,0,0,1,1)
    maze[5][0] = new Array(0,0,0,0,1,0,1,1,1,1,0,0)
    maze[5][1] = new Array(1,1,1,1,1,1,0,0,0,1,0,1)
    maze[6][0] = new Array(0,0,0,0,0,0,1,1,0,1,0,1)
    maze[6][1] = new Array(1,1,1,1,1,1,0,0,0,1,0,1)
    maze[7][0] = new Array(1,0,1,0,0,0,1,0,1,1,0,1)
    maze[7][1] = new Array(1,1,1,0,1,0,0,1,0,1,1,1)
    maze[8][0] = new Array(0,0,0,1,0,0,1,1,0,0,0,0)
    maze[8][1] = new Array(0,1,0,1,1,0,0,0,1,1,0,1)
    maze[9][0] = new Array(0,0,0,0,0,1,1,1,1,0,1,1)
    maze[9][1] = new Array(1,1,1,1,0,0,0,0,0,1,1,1)
    maze[10][0] = new Array(0,0,0,0,0,1,1,1,1,1,0,0)
    maze[10][1] = new Array(1,1,1,0,1,0,0,0,0,1,0,1)
    maze[11][0] = new Array(0,0,1,1,1,1,1,1,1,0,0,0)
    maze[11][1] = new Array(1,0,1,0,0,0,0,0,0,0,1,1)
    maze[12][0] = new Array(0,0,0,0,0,1,1,1,1,0,1,0)
    maze[12][1] = new Array(1,1,0,1,0,0,0,1,0,0,1,1)
    maze[13][0] = new Array(0,0,0,0,0,0,1,1,0,1,0,1)
    maze[13][1] = new Array(1,1,1,1,1,1,0,0,0,1,0,1)
    maze[14][0] = new Array(1,0,1,0,0,0,1,0,1,1,0,1)
    maze[14][1] = new Array(1,1,1,0,1,0,0,1,0,1,1,1)
    maze[15][0] = new Array(0,0,0,1,0,0,1,1,0,0,0,0)
    maze[15][1] = new Array(0,1,0,1,1,0,0,0,1,1,0,1)
    maze[16][0] = new Array(0,0,0,0,0,1,1,1,1,0,1,1)
    maze[16][1] = new Array(1,1,1,1,0,0,0,0,0,1,1,1)
    maze[17][0] = new Array(0,0,0,0,0,1,1,1,1,1,0,0)
    maze[17][1] = new Array(1,1,1,0,1,0,0,0,0,1,0,1)
    maze[18][0] = new Array(0,0,1,1,1,1,1,1,1,0,0,0)
    maze[18][1] = new Array(1,0,1,0,0,0,0,0,0,0,1,1)
    maze[19][0] = new Array(0,0,0,0,0,1,1,1,1,0,1,0)
    maze[19][1] = new Array(1,1,0,1,0,0,0,1,0,0,1,1)
    function testNext(nxt) {
        if ((board.rows[start.rows].cells[start.cols].style.backgroundColor=="yellow") && (nxt.style.backgroundColor=='yellow')) {
            message.innerText="我知道你改变主意了."
            board.rows[start.rows].cells[start.cols].style.backgroundColor=""
            return false
        }
        return true
    }
    function moveIt() {
        if (!progress) return
        switch (event.keyCode) {
            case 37: // 向左
                if (maze[start.rows][1][start.cols-1]==0) {
                    if (testNext(board.rows[start.rows].cells[start.cols-1]))
                        message.innerText="Going west..."
                    start.cols--
                    document.all.board.rows[start.rows].cells[start.cols].style.backgroundColor="yellow"
                } else
                    message.innerText="哦，你不能向西走."
                break;
            case 38: // 向上
                if (maze[start.rows][0][start.cols]==0) {
                    if (testNext(board.rows[start.rows-1].cells[start.cols]))
                        message.innerText="Going north..."
                    start.rows--
                    document.all.board.rows[start.rows].cells[start.cols].style.backgroundColor="yellow"
                } else
                    message.innerText="哦，你不能向南走."
                break;
            case 39: // 向右
                if (maze[start.rows][1][start.cols]==0) {
                    if (testNext(board.rows[start.rows].cells[start.cols+1]))
                        message.innerText="Going east..."
                    start.cols++
                    document.all.board.rows[start.rows].cells[start.cols].style.backgroundColor="yellow"
                }
                else
                    message.innerText="哦，你不能向东走"
                break;
            case 40: //向下
                if (maze[start.rows+1]==null) return
                if (maze[start.rows+1][0][start.cols]==0) {
                    if (testNext(board.rows[start.rows+1].cells[start.cols]))
                        message.innerText="Going south..."
                    start.rows++
                    document.all.board.rows[start.rows].cells[start.cols].style.backgroundColor="yellow"
                } else
                    message.innerText="哦，你不能向南走."
                break;
        }
        if (document.all.board.rows[start.rows].cells[start.cols].innerText=="end") {
            message.innerText="你赢了!"
            progress=false
        }
    }
</SCRIPT>
<P ALIGN=center>请使用键盘上的→←↑↓键进行游戏</P><BR>
<p><TABLE ID=board ALIGN=CENTER CELLSPACING=0 CELLPADDING=0>
    <SCRIPT LANGUAGE="JavaScript">
        for (var row = 0; row<maze.length; row++) {
            document.write("<TR>")
            for (var col = 0; col<maze[row][0].length; col++) {
                document.write("<TD STYLE='")
                for (var cell = 0; cell<2; cell++) {
                    if (maze[row][cell][col]==1)
                        document.write(sides[cell]+": 2px black solid;")
                }
                if ((0==col) && (0!=row))
                    document.write("border-left: 2px black solid;")
                if (row==maze.length-1)
                    document.write("border-bottom: 2px black solid;")
                if ((0==row) && (0==col))
                    document.write(" background-color:yellow;' class=start>start</TD>")
                else
                if ((row==maze.length-1) && (col==maze[row][0].length-1))
                    document.write("' class=end>end</TD>")
                else
                    document.write("'> </TD>")
            }
            document.write("</TR>")
        }
        var start = new Object
        start.rows = 0
        start.cols = 0
        progress=true
        document.onkeydown = moveIt;
    </SCRIPT>
</TABLE>
<P ID="message"> </P>
</body>
</html>
